<template>
	<view class="wrap">
		<u-navbar title="积分商城" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" :bgColor="scrollTop > 0 ? '#f73a15' : 'transparent'">
			<!-- <view class="text-white font-15" slot="right">规则</view> -->
		</u-navbar>
		<view class="padding">
			<view class="head p-l-20">
				<view class="flex">
					<!-- <view class="flex-sub">
						<view>积分</view>
						<view class="font-28 text-bold margin-top-xs">{{ walletInfo.shopPoints || 0 }}</view>
					</view> -->
					<view class="flex-sub">
						<view class="font-14 font-b">兑换积分</view>
						<view class="font-28 text-bold margin-top-xs">{{ walletInfo.buyGoodCoupon || 0 }}</view>
					</view>
				</view>
				<!-- <view class="flex m-t-10"> -->
					<!-- <view class="flex-sub" @click="toRecord">积分明细</view> -->
				<view class="flex-sub m-t-10 font-14 font-b flex" @click="toOrderList">兑换记录<u-icon name="arrow-right" size="14" color="#ffffff"></u-icon></view>
				<!-- </view> -->
			</view>
			<view class="font-18 text-black3 text-bold m-t-10 margin-bottom">热门兑换</view>
			<view class="flex justify-between flex-wrap margin-top-sm">
				<view class="bg-white radius-8 margin-bottom goods-item flex flex-direction" v-for="(item,index) in productListData" :key="index" @click="toGoodsDetails(item.productId)">
					<view class="goods-img">
						<image :src="item.mainImageUrl" class="goods-img" />
					</view>
					<view class="padding-lr padding-tb-sm flex flex-direction justify-between flex-sub">
						<view class="text-cut2">
							<text class="font-15 text-bold text-black3">{{item.productName}}</text>
						</view>
						<view class="margin-top-sm">
							<view class="text-theme text-bold font-17">{{ item.productPrice }}积分</view>
							<view class="flex justify-between align-center margin-top-xs">
								<view class="text-gray font-13 noUse">￥{{ item.priceScribing || 0 }}</view>
								<view class="dh-btn">兑换</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status"/>
		</view>
	</view>
</template>

<script>
	import { wallet } from '@/common/api/customer.js'
	import { productList} from '@/common/api/product.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				walletInfo: {},
				status: 'loading',
				productListData: [],
				scrollTop: 0,
				queryParmas:{
					cateId: null,
					areaId: 7,
					pageNo: 1,
					pageSize:10,
					keyword:null,
				}
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.tabId = 0
			this.current = 0
			this.cateId = ''
			this.keyword = ''
			this.reset()
			this.getProductList()
			// 关闭下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		// 到达底部
		onReachBottom() {
			if(this.status !== 'nomore'){
				this.queryParmas.pageNo++
				this.getProductList()
			}
		},
		onShow() {
			this.getWallet()
			this.getProductList()
		},
		methods: {
			//清空操作
			reset() {
				this.status = 'loading'
				this.productListData = []
				this.pageNo = 0
			},
			// 获取商品列表
			getProductList() {
				productList(this.queryParmas).then(res => {
					if(this.queryParmas.pageNo == 1){
						this.productListData = res.data
					}else{
						this.productListData = this.productListData.concat(res.data)
					}
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			// 获取用户钱包
			getWallet() {
				wallet().then(res => {
					this.walletInfo = res.data || {}
				})
			},
			toOrderList() {
				uni.navigateTo({
					url: '/pages/order/orderList?tabIndex=0&productArea=7'
				})
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/my/wallet/pointsRecords?walletType=' + 8 + '&title=' + '购物积分明细'  + '&tabIndex=' + 0
				})
			},
			// 点击进入详情
			toGoodsDetails(id) {
				uni.navigateTo({
					url: '/pages/points/goodsDetails?productId='+id
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #F2F3F5;
}
</style>
<style lang="scss" scoped>
.wrap {
	background-image: url('/static/points/index-bg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.head {
	background-image: url('/static/points/bg1.png');
	background-size: 100% 100%;
	font-size: 32rpx;
	color: #ffffff;
	height: 300rpx;
	padding: 64rpx 40rpx 40rpx 80rpx;
	box-sizing: border-box;
	width: 100%;
}
.goods-item {
	width: calc(50% - 15rpx);
	overflow: hidden;
	.goods-img {
		width: 100%;
		height: 361rpx;
	}
	.proName {
		height: 100rpx;
	}
	.pro-sub {
		height: 172rpx;
	}
	.zq-label {
		background: #FF0000;
		border-radius: 4rpx;
		padding: 2rpx 8rpx;
		margin-right: 8rpx;
	}
	.dh-btn {
		background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 26rpx;
	}
}
</style>
